
<template>
  <div id="home">
    <!-- 头部 -->
    <div id="header" class="clearfix">
      <!-- logo部分 -->
      <div class="header-left">
        <div class="header-imgdiv" @click="toHome();navIndex=1">
          <img class="header-imgdiv-img" src="../img/logo.png" alt="">
        </div>
      </div>
      <!-- 搜索栏部分 -->
      <div class="header-middle">
        <div class="middle-con">
            <div class="middle-input" @click="gettitleIndex">
              <input class="middle-btn1" :class="{btn1:titleIndex==1}"  @click="titleIndex=1" type="button" value="宝贝">
              <input class="middle-btn2" :class="{btn1:titleIndex==2}"  @click="titleIndex=2" type="button" value="店铺">
            </div>
            <div class="middle-search">
              <div class="search-input-con">
                 <input class="search-text" type="text" placeholder="支持宝贝链接，标题，关键词，ID搜索">
                 <!-- 点击搜索部分 -->
                 <input @click="getAllData" class="search-btn"  type="button" value="搜索">
              </div>
              <div class="search-btn-span"></div>
            </div>
            <div class="middle-text">
              <span class="middle-text1">热门搜索：</span>
              <span @click='getTopNav(index)' v-for="(item,index) in topNavData"  :key="index"><a href="#" :class="{topNavClass:index==topIndex}">{{item.value}}</a></span>
            </div>
        </div>
      </div>
      <!-- 登录注册 -->
      <div class="header-right">
        <div class="header-right-con" v-show="isLogin==false">
          <button class="login-btn" @click="toLogin">登录</button>
          <button class="register-btn"  @click="toRegister">注册</button>
        </div>

        <div class="header-right-login" v-show="isLogin==true" >
          <div class="right-right-div"></div>
          <div class="right-login-img" @click="toPerson">
            <div class="login-img-con">
              <img src="../img/01.jpg" alt="">
            </div>
          </div>
          <div class="right-login-num" @click="toPerson">
             <h5>13710860857</h5>
          </div>
          <!-- 点击头像显示用户列表 -->
          <div class="header-login-list">
            <div class="login-list-con1" @click="toPerson">
              <i class="iconfont icon-xiazai"></i>
              <span class="con1-text">
                个人中心
              </span>
            </div>
            <div class="login-list-con2" @click="reToken">
              <i class="iconfont icon-guanji"></i>
              <span class="con2-text">
                退出登录
              </span>
              
            </div>
          </div>
           <!-- 三角形 -->
          <div class="login-triangle-con">
            
          </div>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div id="nav" class="clearfix">
      <div class="nav-bottom">
        <div class="nav-con" @click="getIndex">
          <div class="nav-son nav-first" :class="{textbottom:navIndex==1}"  @click="navIndex=1">今日榜单</div>
          <div class="nav-son nav-second" :class="{textbottom:navIndex==2}" @click="navIndex=2">昨日榜单</div>
          <div class="nav-son nav-third" :class="{textbottom:navIndex==3}" @click="navIndex=3">领劵榜单</div>
          <div class="nav-son nav-fourth" :class="{textbottom:navIndex==4}" @click="navIndex=4">全网商品</div>
      </div>
      </div>
      
      <!-- 全网商品分类 -->
      <div class="nav-con2" v-show="navIndex==4">
        <div class="nav-all-con">

          <!-- 分类部分 :class="{fenLeicolor:item.ArrIndex==index}"-->
           <div class="nav-all-list clearfix">
            <div class="all-list-title">分类</div>
            <div class="all-list-con">
              <span @click ="selectFenLei(index)" :class="{colorred:index==myindex }"  v-for="(item,index) in fenLeiArr" :key="index">{{item.name}}({{item.num}})</span>
            </div>
          </div>

          <!-- 筛选部分 -->
          <div class="nav-all-check">
            <div class="all-check-title">
              筛选
            </div>

            <div class="all-check-con">
                <div class="nav-price">
                  <span>价格:</span>
                  <input v-model="selectAllData.goods_retailPrice1"  type="text" value="￥">
                  <span>~</span>
                  <input v-model="selectAllData.goods_retailPrice2"  type="text" value="￥">
                </div>

                <div class="nav-quan">
                  <span>券面额:</span>
                  <input v-model="selectAllData.price" type="text" value="￥">
                  <span>以上</span>
                </div>

                <div class="nav-bili">
                  <span>佣金比例≥:</span>
                  <input v-model="selectAllData.promotion_rate" type="text" value="">
                  <span>%</span>
                </div>

                 <div class="nav-sales">
                   <span>销量≥:</span>
                  <input v-model="selectAllData.goods_sale" type="text" value="￥">
                  <span>笔</span>
                </div>
                 <div class="nav-input">
                   <div class="input-con">
                     <input @click="getSelectAllData" type="button" value="确定">
                   </div>
                </div>

                <div class="nav-right"></div>

            </div>
          </div>
        </div>
      </div>

      <!-- 分类列表标题 -->
      <div class="nav-allweb-list" v-show="navIndex==4">

        <div class="nav-allweb-top"></div>

        <div class="allweb-list-con" @click="getAllwebIndex">
          <div class="allweb-all">
            <div class="allweb-list-sales" :class="{textbottom2:allwebIndex==0}"  @click="allwebIndex=0">
              <span>综合</span>
            </div>
            <div class="allweb-list-sales" :class="{textbottom2:allwebIndex==1}"  @click="allwebIndex=1">
              <span>销量{{paiXuText1}}</span>
            </div>
            <div class="allweb-list-sales" :class="{textbottom2:allwebIndex==2}"  @click="allwebIndex=2">
              <span>跑单量{{paiXuText2}}</span>
            </div>
            <div class="allweb-list-sales" :class="{textbottom2:allwebIndex==3}"  @click="allwebIndex=3">
              <span>领券量{{paiXuText3}}</span>
            </div>
            <div class="allweb-list-sales" :class="{textbottom2:allwebIndex==4}"  @click="allwebIndex=4">
              <span>佣金比例{{paiXuText4}}</span>
            </div>
            <div class="allweb-list-sales" :class="{textbottom2:allwebIndex==5}"  @click="allwebIndex=5">
              <span>价格</span>
            </div>
            <div class="allweb-list-right"></div>
          </div>
        </div>

      </div>
    </div>
    <!-- 组件 -->
    <router-view v-bind:pageIndex="pageIndex" v-bind:navIndex='navIndex' v-bind:indexData = "indexData"/>

    <!-- 插件 -->
    <!--@click.native = getPage($event,$index) @click="getPage($event)" -->
      <div class="product-bottom-page" v-show="!(navIndex!=1 && navIndex!=2 && navIndex!=3 && navIndex!=4)">
        <div class="bottom-page">
          <el-pagination style="margin:0 auto;"
          background
          layout="prev, pager, next"
          :total="1000"
          @current-change = "getPage($event)"
          >
        </el-pagination>
        </div>
      </div>
  </div>
</template>

<style lang="scss">

</style>

<script>

import '@/scss/home.scss';
import qs from 'qs';

export default {
  created() {
    // 店铺和宝贝的切换值
    this.titleIndex = 1;
    // 下面分类的默认值
    this.allwebIndex = 0;
    // 导航切换下划线1~4,
    this.navIndex = 1;
    // 第一次加载，获取缓存数据
    var getToken = this.ApiCookie.getCookie('data');
    // 判断如果有
    if(getToken){  //假设有缓存
        this.token = getToken;
        this.isLogin = true;
    }
    // !首页渲染
    this.getAllData();
  },
  data () {
    return {
      // token
      token:'',
      // 用来切换是否登录显示
      isLogin:false,
      // 导航下标
      navIndex:'1',
      // 宝贝店铺下标
      titleIndex:'1',
      // 切换点击复制文案
      getMsgText:false,
      // 点击复制文字
      copy:false,
      // 全网分类里的分类导航
      allwebIndex:'1',
      // 从高到低样式判断
      paiXuText1:'',
      paiXuText2:'',
      paiXuText3:'',
      paiXuText4:'',
      // 筛选出来的数据
      selectAllData:{
        // ?偏移量 页数 
        offset:'',
        // ?分类
        cat_ids:'',
        // 价格1
        goods_retailPrice1:'',
        // 价格2
        goods_retailPrice2:'',
        // 佣金比例
        promotion_rate:'',
        // 销量
        goods_sale:'',
        // ?商品id
        id:'',
        // ?跑单量
        amount:'',
        // ?佣金比例
        promotion:'',
        // ?价格
        price:"",
      },
      // 筛选后的首页数据
      selectIndexData:[],
      // 首页数据
      indexData:'',
      // 顶部热门搜索
      topNavData:[
        {value:'连衣裙',topIndex:0},
        {value:'女包',topIndex:1},
        {value:'女鞋',topIndex:2},
        {value:'零食',topIndex:3},
        {value:'口红',topIndex:4},
        {value:'T恤',topIndex:5},
      ],
      // 全网分类数据
      fenLeiArr:[
        {name:'美食',num:1234,ArrIndex:0},
        {name:'精选',num:553 ,ArrIndex:1},
        {name:'母婴',num:33,ArrIndex:2},
        {name:'水果',num:45,ArrIndex:3},
        {name:'服饰',num:62,ArrIndex:4},
        {name:'百货',num:2562,ArrIndex:5},
        {name:'美妆',num:24,ArrIndex:6},
        {name:'电器',num:5234,ArrIndex:7},
        {name:'男装',num:3452,ArrIndex:8},
        {name:'家纺',num:77,ArrIndex:9},
        {name:'鞋包',num:88,ArrIndex:10},
        {name:'内衣',num:35,ArrIndex:11},
        {name:'运动',num:256,ArrIndex:12},
        {name:'手机',num:567,ArrIndex:13},
        {name:'家具',num:367,ArrIndex:14},
        {name:'汽车',num:37,ArrIndex:15},
        {name:'其他',num:356,ArrIndex:16}
      ],
      // 热门搜索下标
      topIndex:'',
      // 全网搜索 分类下标
      myindex:'',
      // 存储id
      numId:10670,
      // 商品序数下标
      goodsIndex:1,
      // 分页的下标：
      pageIndex:1,
   };
  },
  methods: {
    // !分页数据
    getPage(e){
      this.axios.post("/getyzm/index/index",qs.stringify({
              access_token:this.token,
              offset:e,
        })).then(res => {   
              console.log("查询分页数据回调：", res);
              this.indexData = res.data.data;
              // 把对应的下标存在
              this.pageIndex = e;
              // 点击分页后跳到顶部
              this.ApiScroll.setScrollTop(0);
          });
    },
    // !首页查询数据
    getAllData(){
      this.axios.post("/getyzm/index/index",qs.stringify({
        offset:this.pageIndex,
              type:this.navIndex,
      })).then(res => {
          console.log("首页查询回调：", res);
          // 保存数据
          this.indexData = res.data.data;
      });
    },
    // !getSelectAllData 获取筛选的数据
    getSelectAllData(){
      console.log('筛选的数据',this.selectAllData);
      this.axios.post("/getyzm/index/screen",qs.stringify({
              access_token:this.token,
              // 偏移量
              offset:this.pageIndex,
              // 分类
              cat_ids:'14966',
              // 价格
              goods_retailPrice:`'${this.selectAllData.goods_retailPrice1},${this.selectAllData.goods_retailPrice2}'`,
              // 佣金比例
              promotion_rate:this.selectAllData.promotion,
              // 销量
              goods_sale:this.selectAllData.goods_sale,
              // 商品id
              /* id:'10784',
              // amount炮弹两
              amount:'200',
              // 佣金比例
              promotion:this.selectAllData.promotion,
              // 价格
              price:'20', */
      })).then(res => {
          console.log("筛选回调：", res);
      });

      // !排序
      /* this.axios.post("/getyzm/index/screen",qs.stringify({
              access_token:this.token,
              // 商品id
              id:'',
              // amount炮弹两
              amount:'',
              // 佣金比例
              promotion:this.selectAllData.promotion,
              // 价格
              price:'',
      })).then(res => {
          console.log("筛选回调：", res);
      }); */
    },
    // !退出登录
    reToken(){
      // 删除token
      this.ApiCookie.removeCookie('data',-1);
      this.isLogin = false;
      // 并且跳转到首页
      this.toHome()
    },
    // !获取全网分类里的下标
    getAllwebIndex(){
      // 如果点击对应下标
      if(this.allwebIndex==1){
        this.paiXuText1 = '(从高到低)';
        this.paiXuText2 = '';
        this.paiXuText3 = '';
        this.paiXuText4 = '';
      }else if(this.allwebIndex==2){
        this.paiXuText1 = '';
        this.paiXuText2 = '(从高到低)';
        this.paiXuText3 = '';
        this.paiXuText4 = '';
      }else if(this.allwebIndex==3){
        this.paiXuText1 = '';
        this.paiXuText2 = '';
        this.paiXuText3 = '(从高到低)';
        this.paiXuText4 = '';
      }else if(this.allwebIndex==4){
        this.paiXuText1 = '';
        this.paiXuText2 = '';
        this.paiXuText3 = '';
        this.paiXuText4 = '(从高到低)';
      }else{
        this.paiXuText1 = '';
        this.paiXuText2 = '';
        this.paiXuText3 = '';
        this.paiXuText4 = '';
      }
    },
    // 热门搜索下标
    getTopNav(index){
      this.topIndex = index ;
    },
    // 全网分类里的分类目录 很多类目的
    selectFenLei(index){
      this.myindex = index;
    },
    // 跳转到登录页
    toLogin(){
      this.$router.push({name:"login"});
    },
    // 跳转到登录页
    toRegister(){
      this.$router.push({name:"register"});
    },
    // 跳转到个人中心
    toPerson(){
      // 把导航下标样式设置为无
      this.navIndex=5;
      this.$router.push({name:"person"});
    },
    // 跳转到首页
    toHome(){
      this.$router.push({name:"product"});
    },
    getIndex(){
      // 切换导航下标显示
      // console.log('获取导航下标',this.navIndex);
      // 调用跳到首页函数
      this.getAllData();
      this.toHome();
    },
    gettitleIndex(){
    }
  },
  watch:{
  },
  components: {

  }
}
</script>
